<template>
  <view class="change-city">
    <nav-bar class="nav-bar">
      <text slot="left" class="iconfont icon-ziyuan" @click.native="toCity"></text>
      <view slot="center" class="nav-center"><text class="nav-item">切换城市</text></view>
    </nav-bar>
    <scroll-view scroll-y="true" class="my-scroll" :scroll-top="topValue" id="scroll">
      <view>
        <change-list></change-list>
        <all-city @scrollTo="scrollTo"></all-city>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import ChangeList from '../../components/content/city/ChangeList.vue'
import AllCity from '../../components/content/city/AllCity.vue'
export default {
  components: { ChangeList, AllCity },
  data() {
    return { topValue: 0, top: 72 }
  },
  methods: {
    toCity() {
      uni.reLaunch({ url: '/pages/City/City' })
    },
    scrollTo({ top, title }) {
      this.topValue = top - this.top
      uni.showToast({ title, icon: 'none' })
      //解决重复点击不跳转的问题
      setTimeout(() => {
        this.topValue = this.topValue - 0.00001
      })
    }
  },
  onReady() {
    const query = uni.createSelectorQuery().in(this)
    query
      .select('#scroll')
      .boundingClientRect(data => {
        this.top = data.top
      })
      .exec()
  }
}
</script>

<style lang="scss" scoped>
.change-city {
  background: #100f1f;
  height: 100vh;
  .nav-center,
  .iconfont {
    color: #fff;
  }
  .nav-bar {
    margin-bottom: 30rpx;
  }
  .my-scroll {
    height: calc(100vh - 146rpx);
  }
}
</style>
